<template>
  <div class="box-wrap" id="full">
    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="fullscreen" />
    <el-row :gutter="20">
      <el-col :span="6">
        <dv-border-box-11 title="企业检查统计" style="height: 50%;">
          <div class="box-stat">
            <div class="item-1">
              <strong><i>{{ echartsData.companyData.count }}</i>次</strong>
              <span>安全检查总数</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.companyData.reviewCount }}</i>次</strong>
              <span>安全复查</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.companyData.dangerCount }}</i>个</strong>
              <span>发现隐患</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.companyData.toDoCount }}</i>个</strong>
              <span>已整改隐患</span>
            </div>
            <div class="item">
              <strong><i>{{ (echartsData.companyData.toDoRate === 'NaN' ? 0 : echartsData.companyData.toDoRate * 100).toFixed(2) || 0 }}</i>%</strong>
              <span>隐患整改率</span>
            </div>
          </div>
        </dv-border-box-11>
        <dv-border-box-13 style="height: 50%;">
          <dv-charts v-if="echartsData.dangerTypeRate.series[0].data.length" :option="echartsData.dangerTypeRate" />
        </dv-border-box-13>
      </el-col>
      <el-col :span="12">
        <div class="page-title">{{ store.getters.deptName }}安全检查管理系统</div>
        <div v-if="mapData.length" style="height: calc(100% - 180px);">
          <map-container :map-data="mapData"></map-container>
        </div>
        <div style="padding: 10px 0;text-align: center;">
          <span style="color: #fff; padding-right: 10px;">请选择年份</span>
          <el-date-picker
            v-model="year"
            type="year"
            placeholder="选择年"
            @change="changeYear"
          >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <dv-border-box-11 title="场所检查统计" style="height: 50%;">
          <div class="box-stat">
            <div class="item-1">
              <strong><i>{{ echartsData.storeData.count }}</i>次</strong>
              <span>安全检查总数</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.storeData.reviewCount }}</i>次</strong>
              <span>安全复查</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.storeData.dangerCount }}</i>个</strong>
              <span>发现隐患</span>
            </div>
            <div class="item">
              <strong><i>{{ echartsData.storeData.toDoCount }}</i>个</strong>
              <span>已整改隐患</span>
            </div>
            <div class="item">
              <strong><i>{{ (echartsData.storeData.toDoRate === 'NaN' ? 0 : echartsData.storeData.toDoRate * 100).toFixed(2) }}</i>%</strong>
              <span>隐患整改率</span>
            </div>
          </div>
        </dv-border-box-11>
        <dv-border-box-13 style="height: 50%;">
          <dv-decoration-11 style="width:200px;height:60px;color: #fff;margin: 0 auto 0;">企业隐患排行榜</dv-decoration-11>
          <dv-scroll-ranking-board v-if="echartsData.companyOrder.data.length" :config="echartsData.companyOrder" style="padding: 0 20px;height:80%;" />
        </dv-border-box-13>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import MapContainer from '@/components/Aqjc/MapContainer.vue'
import { listRecord, companyData, companyOrder, dangerTypeRate, storeData, mapData } from '@/api/system/record'
import { listCompanyrecord } from '@/api/system/companyrecord'
import enterprise0 from '@/assets/images/enterprise-0.png'
import enterprise1 from '@/assets/images/enterprise-1.png'
import enterprise2 from '@/assets/images/enterprise-2.png'
import store0 from '@/assets/images/store-0.png'
import store1 from '@/assets/images/store-1.png'
import store2 from '@/assets/images/store-2.png'
import { formatDate } from '@/utils'
import store from '@/store'

export default {
  name: "Map",
  dicts: ['sys_normal_disable', 'check_status', 'store_type', 'store_status'],
  components: {
    MapContainer
  },
  data() {
    return {
      isFullscreen: false,
      store,
      enterprise0,
      enterprise1,
      enterprise2,
      store0,
      store1,
      store2,
      mapOptions: {
        position: []
      },
      companyChecks: [],
      storeChecks: [],
      initPosition: [121.382588,37.548078],
      echartsData: {
        companyData: {},
        companyOrder: {
          data: [],
          rowNum: 10,
          unit: ' 隐患'
        },
        dangerTypeRate: {
          title: {
            text: '企业安全检查隐患占比',
            style: {
              fill: '#fff'
            }
          },
          series: [
            {
              type: 'pie',
              data: [],
              insideLabel: {
                show: true,
                style: {
                  fontSize: 16
                }
              },
              outsideLabel: {
                style: {
                  fontSize: 12
                },
                labelLineBendGap: 10,
                labelLineEndLength: 20
              }
            }
          ]
        },
        storeData: {}
      },
      year: new Date(),
      mapData: []
    };
  },
  async created() {
    const params = {
      beginDate: new Date(this.year).getFullYear() + '-01-01',
      endDate: new Date(this.year).getFullYear() + '-12-31'
    }
    // await this.getStoreChecks({}, params)
    // await this.getEnterpriseChecks(params)
    this.getRecordData(params)
    this.getCompanyData()
    this.getCompanyOrder()
    this.getDangerTypeRate()
    this.getStoreData()
    console.log('position', this.mapOptions.position)
  },
  computed: {
  },
  methods: {
    fullscreen(){
      this.isFullscreen = !this.isFullscreen;
      const element = document.getElementById('full')
      if(this.isFullscreen){
        element.requestFullscreen()
      }else{
        document.exitFullscreen()
      }
    },
    getIcon(status, type) {
      if (type === 'store') {
        if (status === 0) {
          return store0
        }
        if (status === 1) {
          return store1
        }
        if (status === 2) {
          return store2
        }
      }
      if (type === 'enterprise') {
        if (status === 0) {
          return enterprise0
        }
        if (status === 1) {
          return enterprise1
        }
        if (status === 2) {
          return enterprise2
        }
      }
    },
    changeYear(v) {
      console.log('changeYear', v, new Date(v).getFullYear(), this.year)
      const year = new Date(v).getFullYear()
      const params = {
        beginDate: year + '-01-01',
        endDate: year + '-12-31'
      }
      this.getStoreChecks({}, params)
      this.getEnterpriseChecks(params)
    },
    getRecordData (params) {
      mapData(params).then(res => {
        console.log('resssssssss', res)
        this.mapData = res.data
        this.mapOptions.position = res.data[0].position
      })
    },
    async getStoreChecks (params, data) {
      await listRecord(params, data).then(res => {
        // if (res.rows[0].lon && res.rows[0].lon) {
        //   this.mapOptions.position = [res.rows[0].lon, res.rows[0].lat]
        // }
        // for(const item of res.rows){
        //   if (item.lon && item.lon) {
        //     this.mapOptions.position = [item.lon, item.lat]
        //     break
        //   }
        // }
        this.storeChecks = res.rows.map(item => {
          if (!item.lat || !item.lon) return false
          if (item.lon && item.lon && !this.mapOptions.position.length) {
            this.mapOptions.position = [item.lon, item.lat]
          }
          return {
            id: 's' + item.id,
            name: item.csname || '未知',
            position: item.lon && item.lat ? [item.lon, item.lat] : [],
            status: item.status,
            fzr: item.fzr,
            phone: item.phone,
            address: item.address,
            yyzt: item.yyzt,
            type: 'store'
          }
        }).filter(Boolean)
        console.log('this.storeChecks', this.storeChecks)
      }).catch(err => {
        this.storeChecks = []
      })
    },
    async getEnterpriseChecks (params) {
      await listCompanyrecord(params).then(res => {
        // if(!this.mapOptions.position.length) {
        //   for(const item of res.rows){
        //     if (item.lon && item.lon) {
        //       this.mapOptions.position = [item.lon, item.lat]
        //       break
        //     }
        //   }
        // }
        this.companyChecks = res.rows.map(item => {
          if (!item.lat || !item.lon) return false
          if (item.lon && item.lon && !this.mapOptions.position.length) {
            this.mapOptions.position = [item.lon, item.lat]
          }
          return {
            id: 'c' + item.id,
            name: item.companyName || '未知',
            position: item.lon && item.lat ? [item.lon, item.lat] : [],
            status: item.status,
            fzr: item.fzr,
            fzrPhone: item.phone,
            address: item.address,
            type: 'enterprise'
          }
        }).filter(Boolean)
        console.log('this.companyChecks', this.companyChecks)
      }).catch(err => {
        this.companyChecks = []
      })
    },
    getCompanyData () {
      companyData().then(res => {
        console.log('companyData', res)
        this.echartsData.companyData = res.data
      })
    },
    getCompanyOrder () {
      const params = {
        limit: 20
      }
      companyOrder(params).then(res => {
        console.log('companyOrder', res)
        this.echartsData.companyOrder.data = res.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            value: item.dangerCount
          }
        })
      })
    },
    getDangerTypeRate () {
      dangerTypeRate().then(res => {
        console.log('dangerTypeRate', res)
        this.echartsData.dangerTypeRate.series[0].data = res.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            value: item.sumcount
          }
        })
      })
    },
    getStoreData () {
      storeData().then(res => {
        console.log('storeData', res)
        this.echartsData.storeData = res.data
      })
    }
  }
};
</script>
<style scoped>
  ::v-deep .info-name {
    max-width: 80% !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  ::v-deep .ranking-value {
    padding: 0 0.15rem;
  }

 .svg-icon{
  color: white;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
 }
.box-wrap{width: 100%;height: calc(100vh - 84px);padding: 10px 20px;background: #282c34;}
.box-wrap .el-row{height: 100%;padding: 10px 0;}
.box-wrap .el-row .el-col{height: 100%;}
.box-stat{padding: 100px 10px 80px;color: #fff;display: flex;justify-content: space-between;position: relative;height: 100%;width: 100%;flex-wrap: wrap;}
.box-stat .item-1{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;}
.box-stat .item-1 strong{display: block;font-size: 16px;}
.box-stat .item-1 strong i{font-size: 40px;font-family: Georgia, Times New Roman, serif;margin-right: 10px;}
.box-stat .item-1 span{display: block;font-size: 24px;}
.box-stat .item{width: 34%;height: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.box-stat .item strong{display: block;font-size: 16px;}
.box-stat .item strong i{font-size: 30px;font-family: Georgia, Times New Roman, serif;margin-right: 10px;}
.box-stat .item span{display: block;font-size: 14px;}
.page-title{height: 120px;font-size: 34px;color: #fff;display: flex;justify-content: center;align-items: center;}
</style>
